<template>
  <w-view>
    <layout-property :w="w"/>
  </w-view>
</template>

<script>
  import $ from 'dfish-widget'
  import Widget from '../Widget.vue'
  import layout from '../widget.layout.js'

  export default {
    mixins: [Widget],
    data() {
      return {
        name: 'Horizontal',
        remark: '水平布局',
        extends: [layout],
        deprecate: 'current,pub',
        attrs: [

        ],
        examples: [{
          remark: '范例',
          type: 'html',
          view: true,
          code: `
            <w-horizontal height="76">
              <w-html width="180" style="background:lightblue">边栏固定宽度</w-html>
              <w-html width="*" style="background:lightcoral">内容区域自适应</w-html>
            </w-horizontal>
            `
        }, {
          remark: '标题栏+按钮栏效果',
          type: 'html',
          view: true,
          code: `
            <w-horizontal align="between" valign="middle" height="50" style="background:#f9f9f9;padding:0 10px;">
              <w-html>这里是标题</w-html>
              <w-buttonbar gap="10">
                <w-button face="primary" text="保存"></w-button>
                <w-button text="刷新"></w-button>
              </w-buttonbar>
            </w-horizontal>
            `
        }]
      }
    }
  }
</script>

<style>
</style>
